Counter

功能說明

1. 標題
2. 次數 : 顯示目前的數字
3. 按鈕 :
   • increase : 按一下，數字+1
   • reset : 按一下，數字歸0
   • decrease : 按一下，數字-1

HTML重點

• 按鈕的id="btn"可以讓我們在之後的JavaScript部分中，利用document.getElementById()的方法來渲染該按鈕
• 重點程式碼如下 :

  ...
  <!-- 主頁面 -->
  <main>
          <div class="container">
              <!-- 標題 -->
              <h1>Counter</h1>
  
              <!-- 目前數字(預設為0，id為"value") -->
              <span id = "value">0</span>
  
              <!-- 按鈕 -->
              <div class="button-container">
                  <!-- 減一按鈕(class為"decrease") -->
                  <button class="btn decrease">decrease</button>
                  <!-- 歸零按鈕(class為"reset") -->
                  <button class="btn reset">reset</button>
                  <!-- 加一按鈕(class為"increase") -->
                  <button class="btn increase">increase</button>
              </div>
          </div>
  
      </main>
  <!-- javascript -->
  <script src="index.js"></script>
  ...
  

JavaScript重點

1. 將目前數字count設為全域變數(預設為0)

   let count = 0; 
   

2. 透過querySelector()去抓取id為value的元素

   const value = document.querySelector("#value");;
   

3. 透過querySelectorAll()去抓取class為btn的元素

   const btns = document.querySelectorAll(".btn");
   

   btns會是一個陣列，包含3個按鈕的元素

4. 主要函數

   btns.forEach(function(btn){ //針對陣列中的每個元素去做操作
   
       btn.addEventListener("click",function(e){
       //參數e為所謂的事件物件(Event Object)，詳情請見下方參考來源
   
           const styles = e.currentTarget.classList;
           //去抓目前目標的CSS
   
           if(styles.contains("decrease")){
               count--;
           }else if (styles.contains("increase")){
               count++;
           }else{
               count = 0;
           };
           //加減數字
   
           if(count > 0){
               value.style.color = "green";
           }else if(count < 0){
               value.style.color = "red";
           }else {
               value.style.color = "hsl(209, 61%, 16%)";
           //透過修改元素的color去改變顏色
       }
   
       value.textContent = count;
       //將數字更改為count
   });
   

參考來源

1. querySelector()與querySelectorAll()的差別
2. addEventListener()中的事件處理器(Event Handler)
3. ClassList介紹